import React from 'react'
import styles from './styles/modal'
import {Link} from 'react-router'

const Seeimg = React.createClass({

    propTypes: {
        url: React.PropTypes.string
    },

    getInitialState: function(){
        return {visible: false,show:false}//visible控制display,show控制动画,
    },

    hide: function(){
        this.setState({show:false});
        setTimeout(()=>{this.setState({visible: false});},300);
         
    },

    show: function(){
        this.setState({visible: true});
        setTimeout(()=>{this.setState({show: true});},100);
      
    },

    render: function(){
        let visibleKlass = this.state.visible ? ' visible' : '';
        let show = this.state.show?' modal-show':'';
            return (
                <div className={"modal-root alert-modal " + this.props.className + visibleKlass}>
                    <div className={"mask"+show}></div>
                    <div className={"modal-container"+show} onClick={this.hide}>
                    	 <span className = "sline"></span>
                        <div className="modal-content" onClick={e=>e.stopPropagation()}>
	                           <div className="con">
	                           		<img src={this.props.url} alt="" />
	                           </div>
                        </div>
                    </div>
                </div>
            )
    },
})

export default Seeimg;
